<template>
    <div>

      <!-- 添加或修改的弹窗-->
      <el-dialog title="品牌规格" :visible.sync="dialogFormVisible" >
        <el-form ref="form" :model="specification" label-width="80px">
          <el-form-item label="规格名称">
            <el-input v-model="specification.specName" aria-placeholder="品牌名称"></el-input>
          </el-form-item>
        </el-form>
        <el-button @click="addRow">新增规格选项</el-button>

        <el-table
          :data="specification.tbSpecificationOptions"
          style="width: 100%">
          <el-table-column
            label="名称"
            width="180">
            <template slot-scope="scope">
              <el-input v-model="scope.row.optionName" placeholder="规格选项"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="排序"
            width="180">
            <template slot-scope="scope">
              <el-input v-model="scope.row.orders" placeholder="排序"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                @click="delRow(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button type="success" round @click="saveSpe()">保存</el-button>
        <el-button @click="$router.back(-1)">取消</el-button>
        {{specification}}
      </el-dialog>

      <!--规格的列表-->
      <h1>规格管理</h1>
      <el-button type="primary" @click="addBrand()">新建</el-button>
      <el-button type="primary">删除</el-button>
      <el-button type="primary">刷新</el-button>
      规格名称:<el-input v-model="map.specName" placeholder="请输入内容" style="width: 250px"></el-input>
     <el-button type="success" @click="seach()">查询</el-button>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="150">
        </el-table-column>
        <el-table-column
          prop="id"
          label="规格Id"
          width="350">
        </el-table-column>
        <el-table-column
          prop="specName"
          label="规格名称"
          width="350">
        </el-table-column>
        <el-table-column
          label="操作"
          width="180">
          <template slot-scope="scope">
            <el-button type="primary" @click="updateEdit(scope.row.id)" size="mini">修改</el-button>
          </template>
        </el-table-column>
      </el-table>



      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400">
      </el-pagination>

      <div style="margin-top: 20px">
        <!--<el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>-->
        <el-button @click="toggleSelection()">取消选择</el-button>
      </div>
    </div>


</template>

<script>
  export default {
    name: 'SpecificationList',
    data(){
      return{
        //是列表的对象和集合
        tableData:[],
        map:{},
        //是添加双表的对象
        specification:{
          tbSpecificationOptions:[]
        },
        page:1,
        size:4,
        total:0,
        dialogVisible:false,
        dialogFormVisible: false,
      }
    },methods:{
      saveSpe(){ //添加两张表的数据
        this.$http.post("/specification/addSpecification",this.specification).then((res)=>{
          debugger
          if (res.data.flag){
            alert("sucess");
            location.reload();
          }else{
            alert("error");
          }
        })
      },
      seach(){ //模糊查询
        this.findAll();
      },
      addBrand(){ //调到添加的页面
        this.dialogFormVisible=true;
      },
      delRow(id){ //添加表中的删除
        this.specification.tbSpecificationOptions.splice(id,1);
      },
      addRow(){ //新增规格选项
        this.specification.tbSpecificationOptions.push({});
      },
      findAll(){ //查询列表
        this.$http.post("/specification/list/"+this.page+"/"+this.size,this.map).then((res)=>{
          console.log(res);
          this.tableData=res.data.data.rows;
          this.total=Math.ceil(res.data.data.total/this.size);
        })
      },
      updateEdit(id){ //修改 通过id来进行回显
        this.$http.get("/specification/findById/"+id).then((res)=>{
          this.specification=res.data.data;
          this.dialogFormVisible = true;
        })
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.size=val;
        this.findAll()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.page=val;
        this.findAll();
      },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
    },mounted(){
        this.findAll();
    }
  }
</script>

<style scoped>

</style>
